<template>
  <div style="color: #666;font-size: 14px;">
    <div style="padding-bottom: 20px">
      <b>您好！{{ user.nickname }}</b>
    </div>
    <el-row style="margin-top: 40px">
      <el-col :span="12">
        <div style="width: 500px; margin: 0 auto; padding: 20px; box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); border-radius: 10px;">
          <div style="text-align: center; margin-bottom: 20px; font-size: 24px">
            <b>全国疫情实时数据</b>
          </div>
          <div style="display: flex; flex-wrap:wrap; justify-content: flex-start;" >
            <div class="item1" style="background-color: lightblue">
              <div class="item_title">境外输入</div>
              <div class="item_num" style="color: RoyalBlue">{{ total.input ? total.input : '未更新' }}</div>
              <div class="item_num item_num_plus">较昨日 <span style="color: RoyalBlue">+{{ today.input }}</span></div>
            </div>
            <div class="item1" style="background-color: aliceblue">
              <div class="item_title">无症状感染者</div>
              <div class="item_num" style="color: LightCoral">{{ extData.noSymptom ? extData.noSymptom : '未更新' }}</div>
              <div class="item_num item_num_plus">较昨日 <span style="color: LightCoral">+{{ extData.incrNoSymptom }}</span></div>
            </div>
            <div class="item1" style="background-color: lightgoldenrodyellow">
              <div class="item_title">现有确诊</div>
              <div class="item_num" style="color: OrangeRed">{{ ( total.confirm - total.dead - total.heal ) ? ( total.confirm - total.dead - total.heal ) : '未更新' }}</div>
              <div class="item_num item_num_plus">较昨日 <span style="color: OrangeRed">+{{ today.confirm - today.dead - today.heal ? today.confirm - today.dead - today.heal : '' }}</span></div>
            </div>
            <div class="item1" style="background-color: lightgray">
              <div class="item_title">累计确诊</div>
              <div class="item_num" style="color: Brown">{{ total.confirm ? total.confirm : '未更新' }}</div>
              <div class="item_num item_num_plus">较昨日 <span style="color: Brown">+{{ today.confirm }}</span></div>
            </div>
            <div class="item1" style="background-color: lightpink">
              <div class="item_title">累计死亡</div>
              <div class="item_num" style="color: #333">{{ total.dead ? total.dead : '未更新' }}</div>
              <div class="item_num item_num_plus">较昨日 <span style="color: #333">+{{ today.dead }}</span></div>
            </div>
            <div class="item1" style="background-color: lightgreen">
              <div class="item_title">累计治愈</div>
              <div class="item_num" style="color: green">{{ total.heal ? total.heal : '未更新' }}</div>
              <div class="item_num item_num_plus">较昨日 <span style="color: green">+{{ today.heal }}</span></div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="12">
        <div id="main" style="width: 100%; height: 500px"></div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import '@/utils/china.js'
  export default {
    name: "Home",
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        total: {},
        today: {},
        extData: {}
      }
    },
    created() {
      this.openFullScreen2();
    },
    mounted() {
      const options = {
        //标题样式
        title: {
          text: '中国疫情地图',
          x: "center",
          y: '0%',
          textStyle: {
            fontSize: 20,
            color: "#333"
          },
        },
        //这里设置提示框 (鼠标悬浮效果)
        tooltip: {
          //数据项图形触发
          trigger: 'item1',
          //提示框浮层的背景颜色。 (鼠标悬浮后的提示框背景颜色)
          backgroundColor: "white",
          //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
          formatter: '地区：{b}<br/>现有确诊病例：{c}'
        },
        //视觉映射组件
        visualMap: {
          top: 'center',
          left: 'left',
          // 数据的范围
          min: 10,
          max: 300,
          text: ['高', '低'],
          realtime: true,  //拖拽时，是否实时更新
          calculable: true,  //是否显示拖拽用的手柄
          inRange: {
            // 颜色分布
            color: ['white', 'Tomato', 'orangered']
          }
        },
        series: [
          {
            name: '确诊',
            type: 'map',
            mapType: 'china',
            roam: true,
            //是否开启鼠标缩放和平移漫游
            itemStyle: {
              //地图区域的多边形 图形样式
              normal: {
                //是图形在默认状态下的样式
                label: {
                  show: true,//是否显示标签
                  textStyle: {
                    color: "black"
                  }
                }
              },
              zoom: 1,
              //地图缩放比例,默认为1
              emphasis: {
                //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                label: {show: true}
              }
            },
            top: '0%',
            left: '15%',
            data: []
          }
        ]
      }
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);

      // 获取数据
      this.request.get("echarts/epidemic").then(res => {
        console.log("前端拿到的数据=========");
        // console.log(res.data)
        var obj = JSON.parse(res.data);
        // console.log(obj)
        this.total = obj.data.chinaTotal.total
        this.today = obj.data.chinaTotal.today
        this.extData = obj.data.chinaTotal.extData

        let data = [ {name: '南海诸岛', value: 0} ]
        obj.data.areaTree[2].children.forEach(item1 => {
          data.push({ name: item1.name, value: item1.total.confirm - item1.total.dead - item1.total.heal })

          options.series[0].data = data
          myChart.setOption(options)
        })
      })

    }
    ,methods:{
      openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      }
    }
  }
</script>

<style>
  .item1 {
    text-align: center;
    width: 150px;
    height: 150px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .item1:nth-child(3n) {
    margin-right: 0;
  }
  .item_title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
  }
  .item_num {
    margin-top: 10px;
    font-size: 30px;
    font-weight: bold;
  }
  .item_num_plus {
    font-size: 16px;
    color: #666;
  }
</style>

